<template>
  <div class="page-container">
    <van-nav-bar
      title="订单详情"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="content-box">
      <div class="content-title">订单内容</div>
      <div class="content-richText">
        <p>患者姓名：{{ detailData.user_message.name }}</p>
        <p>商品名称：{{ detailData.product.store_name }}</p>
        <!-- <p>商品简介：{{ detailData.product.store_introduce }}</p> -->
        <p>商品价格：{{ detailData.product.price }}</p>
        <p>
          总次数/剩余次数：{{ detailData.order.total_appointment_num }} /
          {{ detailData.order.appointment_num }}
        </p>
      </div>
    </div>

    <van-cell
      title="选择日期"
      :value="appointmentDate"
      style="margin-top: 10px; padding: 10px"
      @click="calendarShow = true"
    />
    <van-calendar v-model="calendarShow" @confirm="onConfirm" />

    <div v-if="timeSlot.length !== 0" class="choose-container">
      <div
        v-for="(item, index) in timeSlot"
        :key="index"
        :class="[
          'choose-item',
          item.is_show ? 'choose-click' : 'choose-no-click',
          currentIndex === index ? 'choose-selected' : ''
        ]"
        @click="item.is_show ? choose(item, index) : ''"
      >
        {{ item.name }}
      </div>
      <div class="placeholder" />
      <div class="placeholder" />
      <!-- 占位元素：实现多行多列流式布局 -->
    </div>

    <van-goods-action>
      <van-goods-action-button type="info" text="确认预约" @click="confirm" />
    </van-goods-action>
  </div>
</template>
<script>
import { detail } from '@/api/order'
import { period, appoint } from '@/api/store'
import { setNowFormatDate } from '@/utils/common'
import {
  Button,
  Card,
  Tag,
  Toast,
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionButton,
  Calendar,
  Dialog
} from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Card.name]: Card,
    [Tag.name]: Tag,
    [Toast.name]: Toast,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionButton.name]: GoodsActionButton,
    [Calendar.name]: Calendar
  },
  data() {
    return {
      detailData: {
        product: {},
        order: {},
        user_message: {}
      },
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-1.jpg'
      ],
      appointmentDate: setNowFormatDate(new Date(), 'day'),
      calendarShow: false,
      timeSlot: [], // 渲染时间段
      selectedTimeId: '', // 选中的时间段id
      currentIndex: '' // 选中的下标
    }
  },
  created() {
    this.getPeriod()
    this.getOrderInfo(this.$route.query.id)
    Dialog.confirm({
      title: '',
      message: '当天临时预约必须先和店长确认，否则可能无法安排！',
      showCancelButton: false
    }).then(() => {
    })
  },
  methods: {
    // 获取详情
    getOrderInfo(id) {
      detail({ order_id: id }).then((res) => {
        if (res.error.code === 0) {
          this.detailData = res.data
        }
      })
    },
    // 获取门店可预约的时间段
    getPeriod() {
      period({ date: this.appointmentDate }).then((res) => {
        if (res.error.code === 0) {
          this.timeSlot = res.data
        }
      })
    },
    // 选中日期
    onConfirm(date) {
      this.calendarShow = false
      this.appointmentDate = setNowFormatDate(new Date(date), 'day')
      this.getPeriod()
      this.currentIndex = null
      this.selectedTimeId = null
    },
    // 选中时间段
    choose(item, index) {
      this.currentIndex = index
      this.selectedTimeId = item.id
    },
    // 确定预约
    confirm() {
      if (!this.selectedTimeId) {
        Toast('请选择预约时间段')
        return false
      }
      const data = {
        order_id: this.detailData.order.order_id,
        time_id: this.selectedTimeId,
        date: this.appointmentDate
      }
      appoint(data).then((res) => {
        if (res.error.code === 0) {
          Toast('预约成功')
          this.$router.push({ name: 'package' })
        }
      })
    },
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.page-container {
  height: 100vh;
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.van-goods-action {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.swipe-container {
  height: 250px;
}
.content-box {
  background-color: #ffffff;
  margin-top: 10px;
}
.content-title {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px;
  font-size: 14px;
  color: #868686;
}
.content-richText {
  padding: 10px;
  font-size: 14px;
}
.choose-container {
  margin-top: 10px;
  padding: 0 10px 10px 10px;
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.choose-item {
  margin-top: 10px;
  background-color: #f2f2f2;
  padding: 10px;
  width: 30%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;
  font-size: 14px;
  border: 1px solid #f2f2f2;
}
.placeholder {
  margin-top: 10px;
  height: 0;
  width: 30%;
}
.choose-no-click {
  color: #bebebe;
  cursor: not-allowed;
}
.choose-click {
  cursor: pointer;
}
.choose-selected {
  color: #00bfff;
  background-color: #e0f2f7;
  border: 1px solid #00bfff;
}
</style>
